{% extends 'insight/layout.html' %}
{% block title %}换电过程特征{% endblock %}
{% block content %}
<script src="http://43.137.4.113/public/js/echarts.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-6" align="center">
            <h3><a href="/insight/station/{{station.station_id}}">{{station.station_name}}</a></h3>
        </div>
        <div class="col-6" align="center">
            <h3><a href="/insight/daily_feature_line/{{station.station_id}}/{{physical_quantity}}/{{statistical_method}}">特征每日曲线</a></h3>
        </div>
    </div>
    <div class="row">
        <div class="col" align="center">
    <div id="main" style="width: 100%;height:600px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '{{physical_quantity_desc}}{{statistical_method_desc}}',
        left: 'center',
        top: 'top',
    },
    tooltip:{
        trigger: 'axis',
        axisPointer:{type: 'cross'},
        formatter: function(params){
            const param = params[0];
            const xValue = param.name;
            const yValue = param.value;
            return `<div style="font-weight:bold;">${xValue}</div>
                    <div>特征值：${yValue}</div>`;
            },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',  // 半透明白色背景
        borderColor: '#ddd',
        borderWidth: 1,
        padding: 10,
        textStyle: { color: '#333' }
    },
    xAxis: {
        type: 'category',
        name: '换电时间',
        data: {{start_time_list|safe}}
    },
    yAxis: {
        type: 'value',
        name: '特征值',
    },
    series: [
    {
        name: '特征值',
        type: 'line',
        data: {{feature_value_list|safe}},
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
            width: 2,
            color: '#5470c6'
        },
        label:{
            show: true,
            position: 'top',
            distance: 5,
            fontSize: 12,
            color: '#333',
            fontWeight: 'bold',
        }
    },
    {
        name: '上限值',
        type: 'line',
        data: {{upper_limit|safe}},
        symbol: 'none',  // 隐藏数据点，只显示线
        lineStyle: {
            width: 2,
            color: '#f56c6c',
            type: 'dashed',
            dashOffset: 5
        },
        label: {
            show: true,
            position: 'right',
            formatter: `3sigma 上限: {{upper_limit_value}}`,
            textStyle: {
                color: '#f56c6c',
                fontWeight: 'bold'
            }
        }
    },
    {
        name: '下限值',
        type: 'line',
        data: {{down_limit|safe}},
        symbol: 'none',  // 隐藏数据点，只显示线
        lineStyle: {
            width: 2,
            color: '#e6a23c',
            type: 'dashed',
            dashOffset: 5
        },
        label: {
            show: true,
            position: 'right',
            formatter: `3sigma 下限: {{down_limit_value}}`,
            textStyle: {
                color: '#e6a23c',
                fontWeight: 'bold'
            }
        }
    },
]
};
option && myChart.setOption(option);
</script>
{% endblock %}